<template>
    <div class="nums_wrap" :class="{ disabled: disabled }">
        <span class="btn" @click.prevent.stop="handleMinus" :class="{ active: active }">
            <el-icon size="20">
                <Minus />
            </el-icon>
        </span>
        <span class="nums">{{ modelValue }}</span>
        <span class="btn" @click.prevent.stop="handleADD">
            <el-icon size="20">
                <Plus />
            </el-icon>
        </span>
    </div>
</template>

<script>
import { defineComponent, ref, reactive, nextTick, onMounted, toRaw, toRefs, watch } from 'vue'
export default defineComponent({
    props: {
        modelValue: {
            type: Number,
            default: () => 0
        },
        disabled: {
            type: Boolean,
            default: () => false
        }
    },
    emits: ["update:modelValue", "add", "reduce"],
    setup(props, { emit }) {
        const active = ref(false)
        watch(() => props.modelValue, (v) => {
            if (v <= 0) {
                active.value = true
            } else {
                active.value = false
            }
        })
        const handleADD = () => {
            emit('add')
        }

        const handleMinus = () => {
            if (props.modelValue <= 0) {
                return
            }
            emit('reduce')
        }
        return {
            active,
            handleADD,
            handleMinus
        }
    }
})
</script>
<style scoped lang='scss'>
.nums_wrap {
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 2px;
    width: 70px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    .nums {
        width: 100%;
        text-align: center;
        color: #000;
    }

    .btn {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #000;
        font-weight: bold;
    }

    .active {
        color: #a8a8a8;
    }
}

.disabled {
    .nums {
        color: #a4a1a1;
    }

    .btn {
        color: #a4a1a1;
    }
}
</style>